/**
 * Created by cai on 2017/7/17.
 */

import React, {Component} from 'react';

import {View, StyleSheet, Image, Text, TouchableHighlight} from "react-native";

export default class TitleView extends Component {

  backImageUrl = require("./img/arrow_left_white.png");
  // extImgUrl;

  backClick = function () {
  };

  extClick = function () {

  };

  showBack = true;
  showExt = false;

  constructor(p) {
    super(p);

    this.p = p;
    if (p.url !== undefined) {
      this.backImageUrl = p.url;
    }

    if (p.extImrUrl !== undefined) {
      this.extImgUrl = p.extImrUrl
    }

    if (p.backClick !== undefined) {
      this.backClick = p.backClick;
    }

    if (p.extClick !== undefined) {
      this.extClick = p.extClick
    }

    if (p.extImgUrl !== null) {
      this.extImgUrl = p.extImgUrl
    }


    if (p.showBack !== undefined) {
      this.showBack = p.showBack
    }

    if (p.showExt !== undefined) {
      this.showExt = p.showExt;
    }

    this.state = {
      showBack: this.showBack,
      showExt: this.showExt,
    }

  }

  render() {
    return (
      <View style={styles.title}>
        <View style={styles.titleHeader}/>
        <View style={styles.titleContent}>
          { this._backButton() }
          <Text style={[styles.text, styles.titleText]}>{this.p.title}</Text>
          <View style={{flex: 1}}/>
          { this._extButton() }
        </View>
      </View>
    )
  }

  _backButton() {
    if (this.state.showBack) {
      return <TouchableHighlight style={[styles.background]}
                                 onPress={() => this.backClick()} activeOpacity={0.65}>
        <View style={styles.titleContent}>
          <Image source={ this.backImageUrl} style={[styles.backImage]}
          />
          <Text style={styles.text}>返回</Text>
        </View>
      </TouchableHighlight>
    } else {
      return null
    }
  }

  _extButton() {
    if (this.state.showExt) {
      return <TouchableHighlight onPress={() => this.extClick()} activeOpacity={0.65}>
        <Image source={ this.extImgUrl} style={styles.extImage}/>
      </TouchableHighlight>
    } else {
      return null
    }
  }

}

var
  Dimensions = require('Dimensions');
var
  ScreenWidth = Dimensions.get('window').width;
var
  ScreenHeight = Dimensions.get('window').height;
var
  ScreenScale = Dimensions.get('window').scale;

const
  styles = StyleSheet.create({
    title: {
      height: 70,
      width: ScreenWidth,
      alignItems: 'center',
      // flexDirection:'row',
      backgroundColor: '#040000'
    },
    titleHeader: {
      height: 20,
    },
    titleContent: {
      height: 50,
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
    },
    highTouch: {},
    text: {
      color: "#ffffff",
      fontSize: 17,
    },
    titleText: {
      // marginTop:20,
      position: 'absolute',
      fontSize: 18,
    },
    background: {},
    backImage: {
      width: 20,
      marginLeft: 10,
      height: 20
    },
    extImage: {
      width: 25,
      height: 25,
    }
  })